@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  body {
    font-family:
      var(--font-plus-jakarta-sans),
      var(--font-inter),
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Helvetica,
      "Apple Color Emoji",
      Arial,
      sans-serif,
      "Segoe UI Emoji",
      "Segoe UI Symbol";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

@layer base {
  h1,
  h2,
  h3,
  h4 {
    @apply !text-magic-deep-purple dark:!text-magic-white;
  }

  a:not(.nextra-sidebar-container a):not(nav a):not(.toc-link) {
    @apply !text-magic-purple dark:!text-magic-soft-pink !underline hover:!text-magic-purple/80 dark:hover:!text-magic-soft-pink/80;
  }

  nav > a {
    @apply !text-ink-grey-400 dark:!text-magic-white dark:hover:!text-ink-grey-400 hover:!text-ink-grey-700 !no-underline;
  }

  nav > a > svg {
    @apply !fill-magic-black dark:!fill-magic-white;
  }

  nav {
    @apply bg-white dark:bg-magic-black;
  }

  pre {
    @apply !bg-magic-semi-deep-purple/15;
  }

  .toc-link {
    @apply cursor-pointer !text-ink-grey-400 dark:!text-magic-white group-hover:!text-ink-grey-700 dark:group-hover:!text-ink-grey-700;
  }

  /* We need to override the underline for nav links and sidebar items */
  nav > a,
  a:has(div.ink-sidebar-item),
  .toc-link {
    @apply no-underline;
  }
}

/* Some custom hacks to override some issues with Nextra */
.nextra-nav-container-blur {
  display: none !important ;
}

/* Remove the padding from the sidebar link, so that we can pply our own style */
a:has(div.ink-sidebar-item) {
  padding: 0 !important;
  background-color: transparent !important;
}

/* Target both the banner container and its text */
.nextra-banner-container {
  @apply text-white !important;
}

.nextra-banner-container a {
  @apply text-white hover:text-white/80 no-underline !important;
}

/* Override the purple link styles specifically for the banner */
.nextra-banner-container
  a:not(.nextra-sidebar-container a):not(nav a):not(.toc-link) {
  @apply text-white hover:text-white/80 underline !important;
}

/* Ensure all text in banner is white, not just links */
.nextra-banner-container {
  @apply text-white !important;
}
